<template>
	<div>
		<van-row>
		  <van-col span="2"></van-col>
		  <van-col span="20">
			  
			  <div style="margin-top: 100px;">
				  
				  <h1>*注册*</h1>
				  
				  <van-form @submit="onSubmit">
				    <van-cell-group inset>
				      <van-field
				        v-model="user.phone"
				        label="填写手机号"
				        :rules="[{ required: true, message: '请填写手机号' }]"
						@change="ckPhone()"
				      />
					  
					  <van-field
					      v-model="code"
					      center
					      clearable
					      label="短信验证码"
					      placeholder="请输入短信验证码"
					  	  @change="ckCode()"
					   >
					      <template #button>
					      <van-button size="small" type="primary" @click="sendCode()" :disabled="isbtncode">发送验证码</van-button>
					      </template>
					    </van-field>
					  
				      <van-field
				        v-model="user.password"
				        type="password"
				        label="请输入密码"
				        :rules="[{ required: true, message: '请填写密码' }]"
				      />
					  
					  <van-field
					    v-model="password2"
					    type="password"
					    label="确认密码"
					    :rules="[{ required: true, message: '请再次输入密码' }]"
					  />
					  
				    </van-cell-group>
					
					<van-field name="radio">
					  <template #input>
					    <van-radio-group v-model="checked" direction="horizontal">
					      <van-radio name="1">请阅读并勾选《用户需知》和《免责声明》</van-radio>
					    
					    </van-radio-group>
					  </template>
					</van-field>
					
				    <div style="margin: 16px;">
				      <van-button round block type="primary" :disabled="isbtnlogin" @click="register()">
				        注册
				      </van-button>
				    </div>
					
					<div style="margin-top: 16px;">
						<van-row>
						  <van-col span="8"><router-link to="/login">登录账号</router-link></van-col>
						  <van-col span="8"></van-col>
						  <van-col span="8"><router-link to="/findpass">忘记密码</router-link></van-col>
						</van-row>
					</div>
					
				  </van-form>
			  </div>
		  </van-col>
		  <van-col span="2"></van-col>
		</van-row>
	</div>
</template>

<script>
	import { ref } from 'vue';
	
	import {Toast} from "vant";
	
	export default {
	  setup() {
		  
	  },
	  data(){
		  return{
			  user:{
			  	phone:"",
			  	password:"",
		      },
			isbtncode:true,
			isbtnlogin:true,
			code:"",
			password2:"",
			checked:false  
		  }
	  },methods:{
		  //校验手机号是否可用
		  ckPhone(){
			  this.axios.get("auth/checkphone?phone="+this.user.phone).then((res) => {
			         if(res.data.code==200){
			           //可用
			          this.$toast.success('恭喜你，手机号可用');
					  //手机号可用，将发送验证码按钮变为可点击
			          this.isbtncode=false;
			         }else{
			           //存在，不可用
			           this.$toast.fail('手机号已在，可登录');
			         }
			    });
		  },
		  //发送手机验证码
		  sendCode(){
			  this.axios.get("sms/sendrcode?phone="+this.user.phone).then((res)=>{
				  if(res.data.code==200){
					  //可用
					  this.$toast.success('验证码已发送，请注意查收');
				  }else{
					  //存在，不可用
					  this.$toast.fail('网络异常');
				  }
			  });
		  },
		 //校验手机号的验证码是否正确
		 	  ckCode(){
		 			  var uc={
		 				  phone:this.user.phone,
		 				  code:this.code
		 			  }
		 	  		  this.axios.post("sms/checkrcode",uc).then((res) => {
		 	  			 if(res.data.code==200){
		 	  				 //可用
		 	  				this.$toast.success('验证码校验成功');
							//验证码正确，注册按钮变为可用
		 	  				this.isbtnlogin=false;
		 	  			 }else{
		 	  				 //存在，不可用
		 	  				 this.$toast.fail('验证码错误，请检查');
		 	  			 }
		 	  		  });
		 	  },
		 	  //实现账号的注册
		 	  register(){
		 		  var that=this;
		 		  this.axios.post("auth/register",this.user).then((res) => {
		 		    console.log(res)
		 			if(res.data.code==200){
		 				//更新令牌
		 				this.$store.commit("setToken",res.data.data);
		 				//吐司，短暂的弹出窗，默认3秒自动消失
		 				this.$toast.success('注册成功，跳转到登录');
		 				//成功-跳转到登录界面
		 				this.$router.push("/login");
		 			}else{
		 				this.$toast({
		 				  message: "亲，网络异常",
		 				  icon: 'close'
		 				});
		 			}
		 		  })
		 	  } 
	  }
	}
</script>

<style>
</style>

